<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>首页banner</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../css/admin.css" media="all">
    <link rel="stylesheet" href="../css/layui.css" media="all">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #product{
  position: relative;
}
  .addForm{
     
    width: 100%;
    position: absolute;
    background-color: #fff;
    z-index: 10;
    top:0;
    left:0;
  }
    .layui-form-item{
      display: flex;
    }
  .layui-form-item .layui-form-label{
    display: inline-block;
    vertical-align: top;
     
   width: 20%;
  }
  .layui-form-item .layui-input-block{
    display: inline-block;
    vertical-align: top;
   
    margin-left:0;
     width: 74%;
  }
  .uploadBtn{
    border: 1px solid #000;
    position: relative;
    left: -120px;
    height: 100%;
    opacity: 0;
  }
  .banner div{
  	width:150px;
  	height:100px;
  	display: inline-block;
  }
    .banner img{
  	width: 100%;
  }
</style>
</head>

<body style="background-color: #fff;">
    
        
    
    <form class="layui-form banner"></form>
    <div   style="background-color: #fff;width:50%;padding:40px;">
        <br /> <br />
        <div class="layui-form form adminform">
           
            <div class="layui-form-item">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-inline">
                    <input type="file" multiple   required     class="layui-input imgFile">
                </div> 
            </div>
            <div class="layui-form-item" style="display: none;">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <input type="text" name="img"       class="layui-input">
                </div> 
            </div>
            <div class="layui-form-item">
               <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal sub">上传</button>
                    <button class="layui-btn layui-btn-danger">取消</button>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../js/static.js"></script>
<script type="text/javascript" src="../js/global.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="../layui/layui.js"></script>
<script>
layui.config({
    base: '../' //静态资源所在路径
}).extend({
    index: 'lib/index' //主入口模块
}).use('index');
</script>
<script>
var layer=layui.layer;
$(".imgFile").change(function(event) {
	var val=returnImgStr($(this));
    $("input[name='img']").val(val);  
});


 
$(".sub").click(function(){
    var adminid=getSession("if").id;
    var data = new FormData();
    data.append("adminid",adminid);
    data.append("bannerid",1);
    data.append("banner", $("input[name='img']").val());
    $.ajax({
            type: 'POST',
            url:preUrl + "/a/sys/updateBanner",
            processData:false,
            contentType:false,
            data:data
        })
        .done(function(res) {
        	layer.msg(res.msg);
            if (res.suc) {
                 
            } else {
                
            }
    })
      
      
});
$(function() {
     $.ajax({
        type: "POST",
          url: preUrl + "/a/sys/getBanner",
            success: function(res) {
            if (res.suc) {
           
            
                 $.each(res.result.banner.split(","),function(index, el) {
                 	var img=$("<div style='padding:20px 10px;'><img src='"+preUrl+"/"+el+"'/></div>");

                 	$(".banner").append(img);
                 });
              
            }
        },

    })
});
</script>

</html>